---
permalink: '/design-system/spacing/index.html'
title: 'Spacing'
---

{% extends "design-system.njk" %}

{% block inner %}
<p>Spacing follows a fluid scale, meaning that text scales based on the size of the viewport and follows a sizing ratio.</p>

{% for size in design.tokens.spacing %}
  <div class="bg-mid-bg box-flex flex-dir-column flex-justify-center flex-align-center" style="width: 100px; min-height: {{ size.max }}px; padding: 0.2em">{{ size.name }}</div>
{% endfor %}

<hr />

<h3>Usage</h3>

<div class="table-wrapper breakout">
  <table>
    <thead>
      <tr>
        <th>Vertical Padding Utility</th>
        <th>Horizontal Padding Utility</th>
        <th>Margin Top Utility</th>
        <th>Flow Space Utility</th>
        <th>Gutter Utility</th>
        <th>Sass function</th>
      </tr>
    </thead>
    <tbody>
      {% for size in design.tokens.spacing %}
        <tr>
          <td>
            <code>.pad-block-{{ size.name | slug }}</code>
          </td>
          <td>
            <code>.pad-inline-{{ size.name | slug }}</code>
          </td>
          <td>
            <code>.gap-top-{{ size.name | slug }}</code>
          </td>
          <td>
            <code>.flow-space-{{ size.name | slug }}</code>
          </td>
          <td>
            <code>.gutter-{{ size.name | slug }}</code>
          </td>
          <td><code>get-space('{{ size.name | slug }}')</code></td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% endblock %}